<template>
  <div >
    <a-modal
      
      :visible="visible"
      :title="formState.id? '会议登记':'新增会议信息'"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="1000px"
      :dialog-style="{ margin: '0 auto',top: '30px'}"
      wrapClassName=""
      @cancel="visible = false"
      >
      <template slot="footer">
          <a-button @click="visible = false">
              取消
          </a-button>
          <a-button :loading="loading" class="blue-btn" @click="onChangeOk">
              完成会议登记
          </a-button>
      </template>
      <div>
        <a-form :form="cform" ref="form" class="onSiteInspectionCheck-In-model-form-box">
          <a-descriptions bordered style="width: 100%;">
            <a-descriptions-item :span="4">
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" >*</span>
                    会议主题
                </span>
                <a-form-item ref="fhyzt" prop="fhyzt" class="zm-form-model">
                    <div style="width: 100%;text-align: center;font-weight: 600;font-size: 18px;">
                        <!-- <a-textarea
                            style="width: 100%;"
                            v-model="formState.fhyzt"
                            :autosize="{ minRows: 1, maxRows: 10000 }"
                            placeholder="请输入会议主题"
                            v-decorator="[ 'fhyzt', {initialValue:formState.fhyzt,rules: rules.fhyzt}]"
                        ></a-textarea> -->
                        {{ formState.fhyzt }}
                    </div>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" >*</span>
                    会议地点
                </span>
                <a-form-item ref="fhydd" prop="fhydd" class="zm-form-model">
                    <div style="width: 100%;">
                        <a-textarea
                            style="width: 100%;"
                            v-model="formState.fhydd"
                            :autosize="{ minRows: 1, maxRows: 10000 }"
                            placeholder="请输入会议地点"
                            v-decorator="[ 'fhydd', {initialValue:formState.fhydd,rules: rules.fhydd}]"
                        ></a-textarea>
                    </div>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                    <!-- <span class="xhText" >*</span> -->
                    会议时间
                </span>
                <a-form-item ref="fhysj" prop="fhysj" class="zm-form-model">
                    <div style="width: 100%;">
                      <a-date-picker
                        show-time
                        style="width: 100%;"
                        placeholder="请选择会议时间"
                        v-model="formState.fhysj"
                        
                        />
                        <!-- v-decorator="[ 'fhysj', {initialValue:formState.fhysj,rules: rules.fhysj}]" -->
                    </div>
                </a-form-item>
            </a-descriptions-item>
            <!-- <a-descriptions-item :span="4">
                <span slot="label" class="descriptions-label-slot">
                    签到二维码
                </span>
                <div style="width: 100%;">
                  <a-button class="blue-btn" @click="shareQRCodeClick({fhyzt:formState.fhyzt,id:formState.id,frylx:'企业',fhylx:formState.fhylx,sqsxid:formState.sqsxid})" icon="qrcode">参会人员签到码</a-button>
                </div>
            </a-descriptions-item> -->
          </a-descriptions>
        </a-form>
      </div>
      <div>
        <commpVxeTable
            :key="dataTableKey"
            :config="dataTableConfig"
            :columns="columnsVxe"
            :formItem="[]"
            ref="acceptanceRegistrationRef"
            @checkboxChange="selectedRowKeysChange"
            @searchEvent="searchEvent"
            @resetEvent="resetEvent"
        >
            <template v-slot:externalOperations="{data}">
                <vxe-form-item>
                  <template>
                    <span style="color: #ed5565;font-weight: 600;;">（提示：请确认参加会议的审评员和观察员）</span>
                  </template>
                </vxe-form-item>
              
                <vxe-form-item>
                    <template>
                        <a-button v-if="!isView" class="blue-btn" type="primary" @click="addPersonnelClick()" icon="user-add">新增人员</a-button>
                    </template>
                </vxe-form-item>
                <vxe-form-item>
                    <template>
                        <a-button v-if="!isView" class="blue-btn" type="primary" @click="selectPersonnelClick()" icon="select">选择人员</a-button>
                    </template>
                </vxe-form-item>
            </template>
            <template v-slot:realname_name="{row}">
                <!-- <a @click="viewClick(row,true)"> -->
                    <span style="padding-right: 21;" v-if="row.realname.length == 2">
                        <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                        {{trem}}
                        <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                        </span>
                    </span>
                    <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                <!-- </a> -->
            </template>
            <template v-slot:sex_default="{row}">
                <span>{{ row.sex == 1?'男':'女' }}</span>
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline" class="search-form" >
                    <a-form-item >
                        <a-button v-if="!isView" class="blue-btn" type="primary" @click="editClick(row)" icon="edit">修改</a-button>
                    </a-form-item>
                    <a-form-item >
                        <a-button v-if="!isView" class="red-btn" type="primary" @click="deleteClick(row)" icon="delete">删除</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
      </div>
    </a-modal>
    <addPersonnel ref="addPersonnelRef" @dataTableChange="dataTableChange"/>
    <selectPersonnel ref="selectPersonnelRef" @dataTableChange="dataTableChange"/>
  </div>
</template>
<script>
import assessCheckApi  from './service/api.js'
import { 
  addSqsxHy,
  updateSqsxHy,
  deleteSqsxHymx,
  querySqsxHymxListByHyId,
  jcyfybxddeleteBxrymxById,
  sqsxYwxxsqsxhywc,
} from './service/index'
import commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import moment from 'moment'
import increaseMan  from './increaseMan.vue'
import QRQueryResults from './QRQueryResults'
import QRcodeList from './QRcodeList'

import addPersonnel from '../reviewVerificationManage/allHandlingPage/manufacturing/onSiteInspection/addPersonnel.vue'
import selectPersonnel from '../reviewVerificationManage/allHandlingPage/manufacturing/onSiteInspection/selectPersonnel.vue'
export default {
  components: {
      commpVxeTable,
      increaseMan,
      QRQueryResults,
      QRcodeList,
      addPersonnel,
      selectPersonnel,
  },
  data() {
    return {
      moment:moment,
      visible: false,
      isView: false,
      loading: false,
      cform:this.$form.createForm(this, { name: 'cform' }),
      formState: {
        sqsxid: ''
      },
      rules:{
        fhyzt: [{
            required: true,
            message: '请输入会议主题',
            trigger: 'blur',
        }],
        fhysj: [{
            type: 'object',
            required: true,
            message: '请选择会议时间',
            trigger: 'blur',
        }],
        fhydd: [{
          required: true,
          message: '请输入会议地点',
          trigger: 'blur',
        }],
      },
      reCommpVxeTable1: '',
      dataTableKey:null,
      dataTableConfig:{
        api: assessCheckApi.jcyfybxdqueryBxryjlBySqsxId,
        rowId: 'id',
        autoHidden:true,
        height:window.innerHeight - 360,
        paramet:{
        }
      },
      columnsVxe:[{
          type: 'checkbox',
          width: 60 ,
          fixed: 'left'
      },{
          title: '姓名', //列头显示文字
          field: 'realname',
          slots: {
              header:'realname_header',
              default: 'realname_name'
          },
          titleInterval:true,
          width:90,
      },{
          title: '性别', //列头显示文字
          field: 'sex',
          titleInterval:true,
          slots: {
              header:'sex_header',
              default:'sex_default',
          },
          width:70,
      },{
          title: '工作单位',
          field: 'fgzdw',

      },{
          title: '审评身份', //列头显示文字
          field: 'fjcsf',
          width:92,
      },{
          title: '手机号码', //列头显示文字
          field: 'phone',
          width:115,
      },{
          title: '操作',
          field: 'id',
          slots: { default: 'operation_btn' },
          fixed: 'right',
          width:180,
      }],
    }
  },
  methods: {
    getData(val,isview){
      this.isView = isview
      if(val.id){
        this.formState = val
        this.formState.fhysj = val.fhysj?moment(val.fhysj):''
        this.dataTableConfig.paramet.sqsxid = val.sqsxid
        this.dataTableKey = Date.now()
      } else {
        this.formState = val
        this.dataTableConfig.paramet.id = ''
      }
      // this.reCommpVxeTable1 = Date.now
      //console.log('打开弹窗',this.formState)
    },
    
    
    selectedRowKeysChange(){},
    searchEvent(){},
    resetEvent(){},
    dataTableChange(){
      this.dataTableKey = Date.now()
    },
    addPersonnelClick(){
      this.$refs.addPersonnelRef.getData({sqsxid:this.formState.sqsxid,fbxdid:'',})
      this.$refs.addPersonnelRef.visible = true
    },
    selectPersonnelClick(){
      this.$refs.selectPersonnelRef.getData({sqsxid:this.formState.sqsxid,fbxdid:'',})
      this.$refs.selectPersonnelRef.visible = true
    },
    deleteClick(row){
      //console.log(row)
      let that = this
      this.$confirm({
          title:'您确认删除吗？',
          // icon: createVNode(ExclamationCircleOutlined),
          onOk() {
              jcyfybxddeleteBxrymxById({id:row.id}).then(res=>{
                  if(res.code == 200){
                      that.$message.success(res.message)
                      that.dataTableChange()
                  }else{
                      that.$message.warning(res.message)
                  }
              })
          }
      })
    },
    editClick(row){
      //console.log(row)
      this.$refs.addPersonnelRef.getData({sqsxid:this.formState.sqsxid,fbxdid:'',...row})
      this.$refs.addPersonnelRef.visible = true
    },
    
    onChangeOk(){
      this.cform.validateFields((err, values) => {
          if (!err) {
            let that = this
            this.$confirm({
                title:'您确认要完成会议登记吗？',
                onOk() {
                  that.formState.fhysj = moment(that.formState.fhysj).format('YYYY-MM-DD')
                  updateSqsxHy(that.formState).then(res1 => {
                    if(res1.code == 200){
                      that.$emit('success')
                      sqsxYwxxsqsxhywc({id:that.formState.id}).then(res=>{
                        if(res.code == 200){
                          that.visible = false
                          that.$message.success(res.message)
                          that.$emit('completeRegistrationChange','完成会议登记')
                        }else{
                          that.$message.warning(res.message)
                        }
                      })
                    }else{
                      that.$message.warning(res1.message)
                    }
                  })
                  
                }
            })
          }
      })
      
    }
  },
}
</script>
<style lang="less">
.onSiteInspectionCheck-In-model-form-box {
  padding: 0 15px;
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 88px !important;
            text-align: right;
            font-family:simHei !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 5px 10px !important;
            .ant-form-item {
              margin-bottom: 0 !important;
            }
        }
        .descriptions-label-slot{
            display: flex;
            align-items: center;
            width: 95px !important;//确保左侧固定文字不会换行
            justify-content: flex-end;
        }
        .xhText{
            display: inline-block;
            color: #f5222d;
            line-height: 31px;
            padding-right: 2px;
            font-size: 14px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-item-center{

        }
        .ant-form-inline .ant-form-item-with-help{
            margin-bottom: 0px !important;
        }
        .zm-form-model{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
        }
        .ant-descriptions-bordered .ant-descriptions-row{
            border-bottom: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            border-right: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-view{
            border: 1px solid #e4e3e3;
            border-right: 0;
        }
        .ant-descriptions-row:last-child{
            border-bottom: 0;
        }

}
</style>
